<template>
	 <view class="InviteItem"> 
			<view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约时间</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime">
					<text class="timeStart">开始时间</text>
					<text class="timeCenter"></text>
					<text class="timeEnd">结束时间</text>
				</view>
			</view>
			<view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约时长</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime">
					<text>(选择预约时间后自动计算)</text>
				</view>
			</view>
			<view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约地址</text>
				</view>
				<text class="divide"></text>
				<view class="place">
					<text>温江区棕榈长滩</text>
					<tui-icon name="arrowdown" size="22" color="#999999"></tui-icon>
				</view>
			</view>
			<view class="item">
				<view class="flexc"> 
				 <text class="isQuired">*</text>
					<text class="label">您的称呼</text>
				</view>
				<text class="divide"></text>
				<view class="place">
					<text>请输入您的称呼</text>
					<tui-icon name="arrowdown" size="22" color="#999999"></tui-icon>
				</view>
			</view>
			<view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">联系电话</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime">
					<text>请输入手机号码</text>
				</view>
			</view>
			<view class="item">
				<view class="flexc"> 
				  <text class="isQuired hide">*</text>
					<text class="label">备注</text>
				</view>
				<text class="divide"></text>
				<view class="place">
					<text>请输入备注</text> 
				</view>
			</view>
			<tui-picker :show="show__2" :layer="2" :pickerData="items__2" :params="1" @hide="hide" @change="change">
			</tui-picker>
	 </view>
</template>

<script>
	export default {
		name: 'InviteItem',
		props: {
			  //是否必填
			 isQuired:{
			 	type: Boolean,
			 	default:false
			 },
			 //label文本
			 label:{
				 type:String,
				 default:false
			 }
		},
		data() {
			return {
				 show__2: false,
				  		items__2: [{
				  			text: '广东省',
				  			value: '100',
				  			children: [{
				  				text: '广州市',
				  				value: '10001'
				  			}, {
				  				text: '深圳市',
				  				value: '10002'
				  			}]
				  		}, {
				  			text: '安徽省',
				  			value: '200',
				  			children: [{
				  				text: '合肥市',
				  				value: '20001'
				  			}, {
				  				text: '安庆市',
				  				value: '20002'
				  			}]
				  		}]
			};
		},
		methods: { 
			 	hide(e) {
			  		this.show__2 = false
			  	},
			  	//调用此方法显示picker
			  	picker__2() {
			  		this.show__2 = true;
			  	},
			  	//选择结果
			  	change(e) {
			  		console.log(e)
			  	}
		}
	};
</script>

<style  lang="scss" scoped>
	.item{
		background: #F5F5F5;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding:   22rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		.hide{
			visibility: hidden;
		}
		.isQuired{
			 font-weight: 500;
			 font-size: 28rpx;
			 color: #FF1F00;
			 line-height: 33rpx;
			 text-align: center;
			 font-style: normal;
			 text-transform: none;
		}
		.flexc{
			display: flex;
			align-items: center;
		}
		.label{
			 font-weight: 500;
			 font-size: 28rpx;
			 width: 112rpx;
			 color: #333333;
			 margin-left: 8rpx;
			 line-height: 33rpx;
			 text-align: left;
			 font-style: normal;
			 text-transform: none;
		}
		.divide{
			margin-left: 20rpx;
			margin-right: 28rpx;
			background-color: #666666;
			 width: 2rpx;
			 height: 28rpx;
		}
		.selectTime{ 
			 font-weight: 500;
			 font-size: 28rpx;
			 color: #999999;
			 line-height: 33rpx;
			 text-align: left;
			 font-style: normal;
			 text-transform: none;
			 display: flex;
			 justify-content: flex-start;
			 align-items: center;
			 width: 70%;
			 .timeCenter{
				 height: 2rpx;
				 width: 30rpx;
				 background-color: #999999;
			 }
		}
		.place{
			font-weight: 500;
			width: 70%;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>